<script setup>
import { onMounted, ref } from 'vue'
import MyApi from '../../../service/api/my/my'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { defineProps, toRefs, defineEmits, watch } from 'vue'
const emit = defineEmits(['success'])
const props = defineProps({
  tableForm: {
    type: Object,
    default: () => ({})
  }
})

const { tableForm } = toRefs(props)

watch(
  () => props.tableForm,
  (newVal) => {
    // 初始化数据
    imageUrl.value = tableForm.value.avatar
    fileList.value = [{ name: '头像', url: tableForm.value.avatar }]
  },
  { deep: true }
)
console.log(props.tableForm)
const imageUrl = ref('')

const upload = ref(false)
const fileList = ref([])

const handleAvatarSuccess = async (res, file) => {
  if (res.code === 200) {
    const resEdit = await MyApi.updateMyInfo({ avatar: res.data.picUrl })
    if (resEdit.code == 200) {
      // 上传成功放到文件列表
      if (res.data.picUrl) {
        fileList.value = [{ name: '头像', url: tableForm.value.avatar }]
      }
      imageUrl.value = tableForm.value.avatar
      ElMessage({
        message: '上传成功',
        type: 'success'
      })
      // 刷新表单
      // 通知父组件刷新
      emit('success')
    } else {
      ElMessage({
        message: '上传失败',
        type: 'error'
      })
    }
  } else {
    ElMessage({
      message: '上传失败',
      type: 'error'
    })
  }
  upload.value = false
}

const handleExceed = (files, fileList) => {
  // 弹出提示
  ElMessage.warning('请删除已上传的图片后再上传新的图片。')
}
</script>

<template>
  <div class="about-me">
    <div class="profile">
      <div class="profile-container">
        <div class="avatar">
          <el-tooltip class="box-item" effect="dark" content="点击更换头像" placement="right">
            <img class="wrapper" src="@/assets/blankAvatar.png" @click="upload = true" />
          </el-tooltip>
        </div>

        <div class="identity-card">
          <div class="inner">
            <img src="../../../assets/college.png" alt="" />
            <p>姓名：</p>
          </div>
          <div class="inner">
            <h3>{{ tableForm.name ?? '暂未填写' }}</h3>
          </div>
        </div>

        <div class="identity-card">
          <div class="inner">
            <img src="../../../assets/right.png" alt="" />
            <p>工号：</p>
          </div>
          <div>{{ tableForm.work_num ?? '暂未填写' }}</div>
        </div>

        <div class="identity-card">
          <div class="inner">
            <img src="../../../assets/right.png" alt="" />
            <p>性别：</p>
          </div>
          <div>{{ tableForm.sex === 0 ? '男' : tableForm.sex === 1 ? '女' : '暂未填写' }}</div>
        </div>
        <div class="identity-card">
          <div class="inner">
            <img src="../../../assets/right.png" alt="" />
            <p>qq：</p>
          </div>
          <div>{{ tableForm.qq ?? '暂未填写' }}</div>
        </div>
        <div class="identity-card">
          <div class="inner">
            <img src="../../../assets/right.png" alt="" />
            <p>电话：</p>
          </div>
          <div>{{ tableForm.phone_num ?? '暂未填写' }}</div>
        </div>
      </div>
    </div>
    <el-drawer v-model="upload" title="上传头像" direction="rtl" size="30%" class="upload">
      <div>
        <el-upload
          class="avatar-uploader"
          v-model:file-list="fileList"
          action="https://information.wusterlllry.top:6262/api/all/uploadPicture"
          list-type="picture-card"
          :headers="{
            token: token
          }"
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="handleAvatarSuccess"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
.about-me {
  width: 100%;
  display: flex;
  flex-direction: column;
  .status-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    img {
      margin: 5px;
      padding: 0;
      width: 20px !important;
      height: 20px !important;
    }
  }
  .identity-card {
    .inner {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: center;
    align-items: center;
    justify-content: space-between;
    img {
      margin: 5px;
      padding: 0;
      width: 15px !important;
      height: 15px !important;
    }
  }
  .about-me-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    line-height: 20px;
    padding-bottom: 0px;
    border-bottom: 1px solid #ccc;
  }
  flex-grow: 2;
  display: flex;
  .wrapper:hover {
    cursor: pointer;
  }
  .profile {
    .avatar {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
    }
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    .profile-container {
      width: 300px;
      flex-direction: column;
      align-items: center;
      img {
        margin-top: 10px;
        width: 80px;
        height: 80px;
      }
      .name {
        margin-bottom: 0px;
      }
      .identity {
        font-size: medium;
      }
    }
  }
  .upload {
    display: flex;
    justify-content: center;
    align-items: center;
    .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
      .avatar_up {
        width: 100%;
        height: 100%;
      }
    }

    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
</style>
